import React, { Component } from 'react';
import SearchBar from '../../components/SearchBar'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import styles from "./index.module.scss"
import { BASE_URL } from "../../utils/url"
import { getCurrentCity } from '../../utils/city.js'
import { Link } from 'react-router-dom';

// 导入图片
import image1 from '../../assets/images/nav-1.png'
import image2 from '../../assets/images/nav-2.png'
import image3 from '../../assets/images/nav-3.png'
import image4 from '../../assets/images/nav-4.png'
export default class Home extends Component {
    constructor() {
        super();
        this.state = {
            cityName: '',
            swipers: null, // 轮播图
            groups: null, // 租房小组
            news: null, // 资讯
            imgHeight: 212,
        }
    }
    // 定义的实例属性
    navs = [
        { icon: image1, text: "整租", path: "/layout/houselist" },
        { icon: image2, text: "合租", path: "/layout/houselist" },
        { icon: image3, text: "地图找房", path: "/map" },
        { icon: image4, text: "去出租", path: "/rent/add" },
    ];

    async componentDidMount() {
        const { label } = await getCurrentCity()
        this.setState({
            cityName: label
        })
        this.getSwiperData()
        this.getGroups()
        this.getNews()
    }
    // 获得轮播图数据
    getSwiperData = async () => {
        const res = await this.axios.get("home/swiper")
        console.log(res, "轮播图");
        this.setState({
            swipers: res.data.body
        })
    }
    // 获取租房小组数据
    getGroups = async () => {
        const res = await this.axios.get("/home/groups?area=AREA%7C88cff55c-aaa4-e2e0")
        console.log(res, "租房小组");
        this.setState({
            groups: res.data.body
        })
    }
    // 获取新闻资讯
    getNews = async () => {
        const res = await this.axios.get("/home/news?area=AREA%7C88cff55c-aaa4-e2e0")
        console.log(res, "新闻资讯");
        this.setState({
            news: res.data.body
        })
    }
    renderNav = () => {
        return (
            <Flex className={styles.nav}>
                {this.navs.map((item) => {
                    return (
                        <Flex.Item key={item.text}>
                            <Link to={item.path}>
                                <img src={item.icon} />
                                <p>{item.text}</p>
                            </Link>
                        </Flex.Item>
                    )
                })
                }
            </Flex>
        )
    }
    // 渲染轮播图
    renderSwipt = () => {
        return (
            <div className={styles.swiper}>
                <Carousel
                    autoplay={false}
                    infinite
                >
                    {this.state.swipers.map(val => (
                        <a
                            key={val.id}
                            href="http://www.alipay.com"
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={`${BASE_URL}${val.imgSrc}`}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </div>
        )
    }
    // 渲染租房小组
    renderGroups = () => {
        return (
            <div className={styles.groups}>
                <Flex>
                    <Flex.Item className={styles.title}>租房小组</Flex.Item>
                    <Flex.Item align="end">更多</Flex.Item>
                </Flex>
                <Grid
                    data={this.state.groups}
                    columnNum={2}
                    hesLine={false}
                    square={false}
                    renderItem={(dataItem) => (
                        <div className={styles.navItem}>
                            <div className={styles.left}>
                                <p>{dataItem.title}</p>
                                <p>{dataItem.desc}</p>
                            </div>
                            <div className={styles.right}>
                                <img src={`${BASE_URL}${dataItem.imgSrc}`} alt="" />
                            </div>
                        </div>
                    )
                    }
                />

            </div>
        )
    }
    // 渲染新闻资讯
    renderNews = () => {
        return (
            <div className={styles.news}>
                <h3 className={styles.groupTitle}>最新资讯</h3>
                <WingBlank size="md">
                    {this.state.news.map(item => {
                        return (
                            <div key={item.id} className={styles.newsItem}>
                                <div className={styles.imgWrap}>
                                    <img src={`${BASE_URL}${item.imgSrc}`} alt="" />
                                </div>
                                <Flex className={styles.content} justify="between" direction="column">
                                    <h3 className={styles.title}>{item.title}</h3>
                                    <Flex className={styles.info} justify="between">
                                        <span>{item.from}</span>
                                        <span>{item.date}</span>
                                    </Flex>
                                </Flex>
                            </div>
                        )
                    })

                    }
                </WingBlank>
            </div>
        )
    }
    render() {
        const { cityName, swipers, groups, news } = this.state
        return (
            <div className={styles.root}>
                <SearchBar cityName={cityName} />
                {/* 渲染轮播图 */}
                {swipers && this.renderSwipt()}
                {/* 渲染导航栏 */}
                {this.renderNav()}
                {/* 渲染租房小组 */}
                {groups && this.renderGroups()}
                {/* 渲染新闻资讯 */}
                {news && this.renderNews()}
            </div>
        );
    }
}